<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>LeafLet Demo</title>
        <script src="leaflet.js"></script>
    </head>
    <body>
        <h1>Leaflet Demo</h1>
        <script>
            console.group('initialize');
            const MyBoxClass = L.Class.extend({
                options: {
                    width: 1,
                    height: 1,
                },

                initialize(name, options) {
                    this.name = name;
                    L.setOptions(this, options);
                },
            });

            MyBoxClass.addInitHook(function () {
                this._area = this.options.width * this.options.height;
            });

            MyBoxClass.include({
                printArea() {
                    return this._area;
                },
            });

            const instance = new MyBoxClass('Red', { width: 10 });
            console.log(instance.name);
            console.log(instance.options.width);
            console.log(instance.options.height);
            console.log(`area: ${instance.printArea()}`);
            console.groupEnd('initialize');
        </script>

        <script>
            console.group('extend');
            const MyCubeClass = MyBoxClass.extend({
                options: {
                    depth: 1,
                },
            });

            MyCubeClass.include({
                _volume(arg1, arg2) {
                    console.log('arg1, arg2:', arg1, arg2);
                    this._volume =
                        this.options.width *
                        this.options.height *
                        this.options.depth;
                },
            });

            MyCubeClass.addInitHook('_volume', 'foo', 42);

            const cube = new MyCubeClass('Blue', { height: 2 });
            console.log(cube.name);
            console.log(cube.options.width);
            console.log(cube.options.height);
            console.log(cube.options.depth);
            console.log('_volume:', cube._volume);
            console.groupEnd('extend');
        </script>
    </body>
</html>
